<template>
  <div class="table-box">
    <Table ref="tableRef" row-key="id" :columns="columns" :request-api="roleApi.list">
      <template #header>
        <ElButton v-auth="'system:role:add'" type="primary" :icon="CirclePlus" @click="handleAdd">新增角色</ElButton>
      </template>
      <!-- 菜单操作 -->
      <template #action="{ row, id }">
        <TableAction :actions="getActions(row, id)"></TableAction>
      </template>
    </Table>
    <Dialog ref="dialogRef" @submit="handleSubmit" :title="title">
      <Form ref="formRef" :schemas="schemas" label-width="100px"></Form>
    </Dialog>
    <Drawer ref="deptDrawerRef" title="数据权限" @submit="handleRoleDeptSubmit">
      <Tree ref="deptTreeRef" :data="deptData" :props="deptProps" node-key="deptId" show-checkbox></Tree>
    </Drawer>
    <Drawer ref="menuDrawerRef" title="菜单权限" @submit="handleRoleMenuSubmit">
      <Tree ref="menuTreeRef" :data="menuData" :props="menuProps" show-checkbox></Tree>
    </Drawer>
  </div>
</template>

<script setup lang="tsx" name="SysRole">
import { ref } from "vue";
import { ElButton } from "element-plus";
import { CirclePlus } from "@element-plus/icons-vue";
import { Table, TableAction, useTable } from "@/components/Table";
import { Dialog, useDialog } from "@/components/Dialog";
import { Form, useForm } from "@/components/Form";
import { Drawer, useDrawer } from "@/components/Drawer";
import { Tree, useTree } from "@/components/Tree";
import { ActionItem } from "@/components/Table/type";
import roleApi from "./api";
import deptApi from "@/views/system/dept/api";
import menuApi from "@/views/system/menu/api";
import { columns, schemas } from "./data";
const tableRef = ref();
const dialogRef = ref();
const formRef = ref();
const menuDrawerRef = ref();
const deptDrawerRef = ref();
const deptTreeRef = ref();
const menuTreeRef = ref();
const { getTableList } = useTable(tableRef);
const { open, close, openLoading } = useDialog(dialogRef);
const { updateFields, validateFields, resetFields } = useForm(formRef);
const menuDrawer = useDrawer(menuDrawerRef);
const deptDrawer = useDrawer(deptDrawerRef);
const deptTree = useTree(deptTreeRef);
const menuTree = useTree(menuTreeRef);
const title = ref("");
const deptData = ref([]);
const menuData = ref([]);
const deptProps = {
  label: "deptName"
};
const menuProps = {
  label: "menuName"
};
const handleAdd = () => {
  title.value = "新增角色";
  open(0);
  resetFields();
};
const handleSubmit = async flag => {
  const fields = await validateFields();
  await openLoading(async () => {
    if (flag) {
      await roleApi.edit(fields);
    } else {
      await roleApi.add(fields);
    }
    close();
    await getTableList();
  });
};
const handleRoleDeptSubmit = async id => {
  await roleApi.deptSave({ roleId: id, deptIds: await deptTree.getCheckedKeys() });
  deptDrawer.close();
};
const handleRoleMenuSubmit = async id => {
  await roleApi.menuSave({ roleId: id, menuIds: await menuTree.getCheckedKeys() });
  menuDrawer.close();
};
const getActions = (row, id): Partial<ActionItem>[] => {
  return [
    {
      type: "primary",
      icon: "edit",
      auth: "system:role:edit",
      onClick: () => {
        title.value = "编辑角色";
        dialogRef.value.open(1);
        updateFields(Object.assign({}, row));
      }
    },
    {
      type: "danger",
      auth: "system:role:remove",
      popConfirm: {
        onConfirm: async () => {
          await roleApi.remove(id);
          await getTableList();
        }
      },
      icon: "delete"
    },
    {
      type: "primary",
      label: "菜单权限",
      icon: "menu",
      auth: "system:role-menu:save",
      onClick: async () => {
        await menuDrawer.open(id);
        menuData.value = await menuApi.list({});
        const roleMenuList = await roleApi.menuList({ roleId: id });
        const menuIds: Number[] = roleMenuList.map(roleMenu => roleMenu.menuId);
        await menuTree.setCheckedKeys(menuIds);
      }
    },
    {
      type: "primary",
      label: "数据权限",
      icon: "operation",
      auth: "system:role-dept:save",
      onClick: async () => {
        await deptDrawer.open(id);
        deptData.value = await deptApi.list({});
        const roleDeptList = await roleApi.deptList({ roleId: id });
        const deptIds: Number[] = roleDeptList.map(roleDept => roleDept.deptId);
        await deptTree.setCheckedKeys(deptIds);
      }
    }
  ];
};
</script>
